<template>
    <div class="area-choose-par">
        <div class="area-choose" :class="isShow ? 'area-div-show' : ''">
            <slot name="top"></slot>
            <div class="area-div area-div-one">
                <a 
                class="area-div-a area-div-one-a" 
                v-for="item in area.first.list"
                :key="item.code"
                :class="area.first.activeCode == item.code ? 'area-div-one-a-active' : ''"
                @click="chooseArea({series: 2, code: item.code, name: item.name, opt: 'second', actOpt: 'first'})"
                >
                {{item.name}}
                </a>
            </div>
            <div class="area-div area-div-second" v-show="showSeries >= 2">
                <a 
                class="area-div-a area-div-second-a" 
                v-for="item in area.second.list"
                :key="item.code"
                :class="area.second.activeCode == item.code ? 'area-div-second-a-active' : ''"
                @click="chooseArea({series: 3, code: item.code, name: item.name, opt: 'thirdly', actOpt: 'second'})"
                >
                {{item.name}}
                </a>
            </div>
            <div class="area-div area-div-thirdly" v-show="showSeries >= 3">
                <a 
                class="area-div-a area-div-thirdly-a area-div-thirdly-all"
                @click="chooseAreaFinally({series: 3, code: area.second.activeCode, name: area.second.activeName, opt: 'second'})"
                >全部</a>
                <a 
                class="area-div-a area-div-thirdly-a" 
                v-for="item in area.thirdly.list"
                :key="item.code"
                :class="area.thirdly.activeCode == item.code ? 'area-div-thirdly-a-active' : ''"
                @click="chooseArea({series: 4, code: item.code, name: item.name, opt: 'fourthly', actOpt: 'thirdly'})"
                >
                {{item.name}}
                </a>
            </div>
            <div class="area-div area-div-fourthly" v-show="showSeries >= 4">
                <a 
                class="area-div-a area-div-fourthly-a area-div-fourthly-all"
                @click="chooseAreaFinally({series: 4, code: area.thirdly.activeCode, name: area.thirdly.activeName, opt: 'thirdly'})"
                >全部</a>
                <a 
                class="area-div-a area-div-fourthly-a" 
                v-for="item in area.fourthly.list"
                :key="item.code"
                @click="chooseAreaFinally({series: 4, code: item.code, name: item.name, opt: 'fourthly'})"
                >
                {{item.name}}
                </a>
            </div>
        </div>

        <!-- 覆盖层 -->
        <van-overlay :show="overlayShow" @click="hideOverlay" />
    </div>
</template>

<script>
// 自定义方法
import { getAreaList } from '_network/request'
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"

// UI组件
import { Overlay } from "vant"

import Vue from "vue"
Vue.use(Overlay)

export default {
    name: 'AreaChoose',
    data() {
        return {
            isShow: false,
            showSeries: 1,
            area: {
                first: {
                    list: [],
                    activeCode: null,
                    activeName: null,
                },
                second: {
                    list: [],
                    activeCode: null,
                    activeName: null,
                },
                thirdly: {
                    list: [],
                    activeCode: null,
                    activeName: null,
                },
                fourthly: {
                    list: [],
                    activeCode: null,
                    activeName: null,
                },
            },
            overlayShow: false,
        }
    },
    methods: {
        // 首次获取
        firstGet() {
            const that = this
            getAreaList({
                isLoad: false,
                callback(data) {
                    // console.log('firstGet data', data)
                    that.setAreaList({data, opt: 'first'})
                }
            })
        },
        // 设置区域列表
        setAreaList({data, opt}) {
            const list = []
            data.forEach(item => {
                list.push({
                    code: item.Code,
                    name: item.AreaName,
                })
            })
            this.area[opt].list = list
            // console.log('this.area[opt].list', this.area[opt].list)
        },
        // 隐藏覆盖层
        hideOverlay() {
            this.overlayShow = false
            this.isShow = false
        },
        // 显示
        show() {
            this.overlayShow = true
            this.isShow = true
        },
        // 点击选择区域
        chooseArea({series, code, name, opt, actOpt}) {
            const that = this
            getAreaList({
                code,
                callback(data) {
                    that.setAreaList({data, opt})
                    that.showSeries = series
                    that.area[actOpt].activeCode = code
                    that.area[actOpt].activeName = name
                }
            })
        },
        // 点击选择最终区域
        chooseAreaFinally({series, code, name, opt}) {
            this.area[opt].activeCode = code
            this.area[opt].activeName = name
            this.$emit('sureArea', {code, name})
            this.hideOverlay()
        },
    },
    activated() {
        this.showSeries = 1
        this.firstGet()
    },
}
</script>

<style lang="scss" scoped>
/* 区域 */
.area-choose {
    height: 360px;
    width: 100%;
    position: fixed;
    bottom: -360px;
    background: white;
    z-index: 102;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-size: 12px;
    transition: bottom .1s;
    flex-wrap: wrap;

    .area-choose-title {
        padding: 0 15px;
        height: 35px;
        color: #999999;
        width: 100%;
        flex-shrink: 0;
        border-bottom: 1px solid #E5E5E5;
        line-height: 35px;
    }

    .area-div {
        width: 25%;
        height: 325px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .area-div-a {
        display: -webkit-flex;
        display: flex;
        min-height: 40px;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        padding: 0 10px;
        color: #333333;
        border-bottom: 1px solid #E5E5E5;
    }

    .area-div-a:hover, .area-div-a:focus {
        color: #333333;
        text-decoration: underline;
    }

    .area-div-one {
        background: white;
        border-right: 1px solid #eeeeee;
    }

    .area-div-one-a {
        border-bottom: 1px solid #E5E5E5;
    }

    .area-div-one-a-active{
        background: #eeeeee;
    }

    .area-div-second {
        background: #eeeeee;
    }

    .area-div-second-a {
        background: #eeeeee;
    }

    .area-div-second-a-active {
        background: #cdcdcd;
    }

    .area-div-thirdly {
        background: #cdcdcd;
    }

    .area-div-thirdly-a {
        background: #cdcdcd;
    }

    .area-div-thirdly-a-active {
        background: #b9b9b9;
    }

    .area-div-fourthly {
        background: #b9b9b9;
    }
}

.area-div-show{bottom: 0!important;}
/* 结束 */
</style>